import React from 'react';
import { Link, Switch, Route, Redirect } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import './Home.less';
import CustomAdd from './home/CustomAdd';
import CustomList from './home/CustomList';

const { SubMenu } = Menu;
const { Content, Sider } = Layout;

class Home extends React.Component {
	render() {
		// console.log(this.props);
		/*
		 * 受路由管控的组件（Route匹配规则渲染的） ，默认有三个属性
		 *    history:go goBack goFoward push ...
		 *    location存储着路由跳转过来的信息（一般都是传递的参数信息）
		 *    match存储路由匹配后的信息
		 */
		return <Layout>
			<Sider width={200}>
				<Menu mode="inline"
					defaultOpenKeys={['custom']} defaultSelectedKeys={['1']}>
					<SubMenu key="custom" title="客户管理">
						<Menu.Item key="1">
							客户列表
						</Menu.Item>
						<Menu.Item key="2">
							新增客户
						</Menu.Item>
					</SubMenu>
				</Menu>
			</Sider>

			<Layout className="contentBox">
				<Content>
					<Switch>
						<Redirect from='/home' exact to='/home/customList' />
						<Route path='/home/customList' component={CustomList} />
						<Route path='/home/customAdd' component={CustomAdd} />
					</Switch>
				</Content>
			</Layout>
		</Layout>;
	}
}
export default Home;